
<ion-header>
    <ion-toolbar class="toolbar-head" style="--border-color:transparent;--background:url(../../assets/img/tab3-bg.png) no-repeat;">
      <ion-title>Cart({{allNum}})</ion-title>
      <span slot="end" style="margin-right: 5px;color: white;" (click)="management()">{{managementStr}}</span>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-content-111">
  <div class="tab-heard">
    <!-- <div class="head-title">
      <span style="margin-right: 5px;" (click)="management()">{{managementStr}}</span>
      <ion-label></ion-label>
      <label>购物车({{allNum}})</label>
    </div> -->

    <div *ngIf="!shopcart" class="tab3-bg text-center">
      <img src="../../assets/img/empty-shopping-cart.png" alt="">
      <span>Your Shopping Cart is empty</span>
    </div>
    <div *ngIf="shopcart">
      <div class="list">
        <div class="shop-list" *ngFor="let item of shopcart;let i=index;">
          <div class="list-content" >
            <ion-checkbox color="danger" mode='ios' [(ngModel)]="item.isSelect" (ionChange)='pitchAll(i,item)'></ion-checkbox>
            <img src='{{solaImage(item.procImg)}}' onerror="this.src='../../assets/img/zhanshi3.png';this.onerror=null" alt="">
            <div class="list-content-right"  (click)="onClickItem(item)">
              <div
                style="font-size: 16px; word-break: break-all; border-collapse: collapse;padding-left: 8px; text-overflow: ellipsis; overflow: hidden; height: 40px">
                {{item.procName}}
              </div>
              <div
                style="font-size: 0.8rem; word-break: break-all; border-collapse: collapse;padding-left: 8px; text-overflow: ellipsis; overflow: hidden; height: 17px">
                size: {{item.size}}
              </div>
              <div
              style="font-size: 0.8rem; word-break: break-all; border-collapse: collapse;padding-left: 8px; text-overflow: ellipsis; overflow: hidden; height: 17px">
               color:{{item.color}}
            </div>
              <!-- <p  style="font-size: 0.8rem; margin-left: 10px;">尺寸颜色</p> -->
              <div class="list-content-money">
                <label>￥ {{AmountOfConversion(item.procCashPrice)}}</label>
                <div class="list-content-num">
                  <img src="../../assets/img/jian.png" alt="" (click)="subtract(i,$event)">
                  <span> {{item.num}}</span>
                  <img src="../../assets/img/jia.png" alt="" (click)="subtract1(i,$event)">
                  <img style="margin-left:20px;" src="../../assets/img/delete.png" alt="" (click)="deleteOne(item,$event)">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
  
</ion-content>
<!-- <ion-footer class="footer" style="background: white;" [ngStyle]="{'bottom':isIOS==true?'60px':'0px'}"> -->
  <ion-footer class="footer-1" style="background: white;" >
  <hr style="background:rgba(51,51,51,1); opacity:0.1; width: 100%;">
  <div class="footer-content">
    <!-- <div class="footer-content-radius"></div> -->
    <div class="footer-num" *ngIf="managementStr=='Edit'?true:false">
      <ion-checkbox color="danger" [(ngModel)]="allCheckbox" (click)="onClickCheck()"></ion-checkbox>
      <label>Total({{allNum}}) :</label>
      <span>￥{{AmountOfConversion(allPrise)}}</span>
      <label style="font-size: 1rem;"></label>
    </div>
    <div class="footer-num" *ngIf="managementStr=='Edit'?false:true">
      <ion-checkbox color="danger" style="margin-right: 10px;"></ion-checkbox><label style="font-size: 0.9rem;">
      </label>
    </div>
  </div>
  <div class="delect-div" *ngIf="managementStr=='Edit'?false:true">
    <button class="delect-div-clear" (click)="clear()">Remove all items</button>
    <button class="delect-div-btn" (click)="onDel()">Remove</button>

  </div>
  <ion-button size='small' (click)="onClick()" *ngIf="managementStr=='Edit'?true:false">
    Checkout
  </ion-button>
</ion-footer>